<template>
	<view>
		<view @click="shop_order_click">{{order_info}}^</view>
		<view v-show="index === current_index && order_show" class="order-list">
			<view v-if='!grid_layout' v-for="(item,order) in order_list" :key="order"
				:class="{'order-item' : true,'item-check' : order+1==select_index}"
				@click="select_order_item(item.info,order+1)">
				<view>{{item.info}}</view>
				<view v-show="order+1==select_index">√</view>
			</view>
			<view v-if='grid_layout' @click="select_order_item(item.info,order+1)" v-for="(item,order) in order_list"
				:key="order" class="grid-order">
				<view class='grid-item'>{{item.info}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "shop-order-one",
		props: {
			index: Number,
			current_index: Number,
			grid_layout: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				order_list: [{
						info: "综合排序"
					},
					{
						info: "销量最高"
					},
					{
						info: "销量最高"
					},
					{
						info: "销量最高"
					}
				],
				select_index: 1,
				select_info: "",
				order_show: false
			};
		},
		computed: {
			// 计算属性的 getter
			order_info: function() {
				// `this` 指向 vm 实例
				return this.select_info
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.select_info = this.order_list[0].info
			},
			select_order_item(info, index) {
				this.select_info = info
				this.select_index = index
				this.order_show = !this.order_show
				this.$emit("select", index)
			},
			shop_order_click() {
				this.order_show = !this.order_show
				this.$emit("click", this.index)
			}
		}
	}
</script>

<style scoped>
	.order-list {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.order-item {
		width: 95%;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center
	}

	.item-check {
		color: #02b6fd;
	}

	.grid-order {
		display: flex;
	}

	.grid-item {
		margin: 5upx 5upx;
		padding: 4upx 8upx;
		border: 1upx solid gray;
		border-radius: 20upx;
	}
</style>